<template>
  <header class="sm-header">
    <section class="sm-header-left">
      <slot name="left"></slot>
    </section>
    <section class="sm-header-center">
      <div class="sm-header-title">{{ title }}</div>
    </section>
    <section class="sm-header-right">
      <slot name="right"></slot>
    </section>
  </header>
</template>

<script setup>
import config from "@/config";
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return config.systemName;
    },
  },
});
</script>
<style scoped lang="less">
.sm-header {
  display: flex;
  position: relative;
  width: 100%;
  height: 1.8rem;
  background-image: url("../../assets/img/theme1/sm-header.png");
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(1);
  color: #ffffffb3;
  font-size: 0.3rem;

  .sm-header-center {
    font-family: HarmonyOS_SansSC_Medium;
    font-weight: 500;
    font-size: 0.6rem;
    padding-top: 0.3rem;
    width: 100%;
    display: flex;
    justify-content: center;
    .sm-header-title {
      color: #ffffff;
      letter-spacing: 0;
      text-shadow: 0 2px 7px #006aff;
    }
  }
  .sm-header-left {
    display: flex;
    height: 0.5rem;
    font-size: 0.3rem;
    line-height: 0.5rem;
    padding-top: 0.22rem;
    position: absolute;
    left: 0.4rem;
    color: #ffffffb3;
  }
  .sm-header-right {
    display: flex;
    height: 0.5rem;
    line-height: 0.5rem;
    padding-top: 0.22rem;
    padding-right: 0.6rem;
    position: absolute;
    right: 0;
    .sm-header-right-time {
      cursor: pointer;
    }
  }
}
</style>
